<template>
	<div style="margin-top: 80px">
		<h2 id="h2login">手动登录</h2>
		<form action="#" method="post">
			<input type="text" name="name" v-model="ruleForm.userName" class="name" placeholder="用户名" required="" />
			<input type="password" name="password" v-model="ruleForm.password" class="password" placeholder="密码" required="" />
			<ul style="display: none;">
				<li>
					<input type="checkbox" id="brand1" value="" />
					<label for="brand1"><span></span>记住密码</label>
				</li>
			</ul>
			<a href="#" style="display: none;">忘记密码?</a><br />
			<div class="clear"></div>
			<input type="button" value="登录" @click="onSignIn" />
		</form>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, computed, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useStore } from '/@/store/index';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { signIn } from '/@/api/login/index';
import { queryHardwareConfig } from '/@/api/common/index';
export default defineComponent({
	name: 'login',
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const store = useStore();
		const route = useRoute();
		const router = useRouter();
		const state = reactive({
			isShowPassword: false,
			ruleForm: {
				userName: route.query.id,
				password: '',
				code: '',
			},
			loading: {
				signIn: false,
			},
		});
		// 时间获取
		const currentTime = computed(() => {
			return formatAxis(new Date());
		});
		// 登录
		const onSignIn = async () => {
			state.loading.signIn = true;
			let defaultAuthPageList: Array<string> = [];
			let defaultAuthBtnList: Array<string> = [];
			// admin 页面权限标识，对应路由 meta.auth，用于控制路由的显示/隐藏
			let adminAuthPageList: Array<string> = ['admin'];
			// admin 按钮权限标识
			let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
			// 不同用户模拟不同的用户权限
			defaultAuthPageList = adminAuthPageList;
			defaultAuthBtnList = adminAuthBtnList;
			// 用户信息模拟数据
			const userInfos = {
				userName: state.ruleForm.userName,
				photo: state.ruleForm.userName === 'admin' ? 'images/police.jpg' : 'images/police.jpg',
				time: new Date().getTime(),
				authPageList: defaultAuthPageList,
				authBtnList: defaultAuthBtnList,
				userId: 0,
				roleId: 0,
				organId: 0,
				phone: '',
				organName: '',
				notification:{}
			};
			await signIn({
				username: state.ruleForm.userName,
				password: state.ruleForm.password,
				loginType: 0,
			}).then((res: any) => {
				if (res.success) {
					userInfos.userId = res.data.id;
					userInfos.roleId = res.data.roleId;
					userInfos.organId = res.data.organId;
					userInfos.organName = res.data.organName;
					userInfos.phone = res.data.phone;
					userInfos.notification=res.data.notification
					// 存储 token 到浏览器缓存
					Session.set('token', res.data.token);
					Session.set('refreshToken', res.data.refreshToken);
					// 存储用户信息到浏览器缓存
					Session.set('userInfo', userInfos);
					// 1、请注意执行顺序(存储用户信息到vuex)
					store.dispatch('userInfos/setUserInfos', userInfos);
					if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
						// 前端控制路由，2、请注意执行顺序
						initFrontEndControlRoutes();
						signInSuccess();
					} else {
						// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
						// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
						initBackEndControlRoutes().then(() => {
							// 执行完 initBackEndControlRoutes，再执行 signInSuccess
							signInSuccess();
						});
					}
				} else {
					state.loading.signIn = false;
					ElMessage.error(`登陆失败，账号或密码错误`);
				}
			});
		};
		// 登录成功后的跳转
		const signInSuccess = () => {
			// 初始化登录成功时间问候语
			let currentTimeInfo = currentTime.value;

			queryHardwareConfig({organid:-1}).then(res=>{
				var rows = JSON.parse(res.data || "[]") ;
				store.dispatch("hardware/setHardwareConfig",rows);
			});

			// 登录成功，跳到转首页
			// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
			// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
			if (route.query?.redirect) {
				router.push({
					path: route.query?.redirect,
					query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
				});
			} else {
				router.push('/');
			}
			// 登录成功提示
			setTimeout(() => {
				// 关闭 loading
				state.loading.signIn = true;
				const signInText = '登陆成功';
				ElMessage.success(`${currentTimeInfo}，${signInText}`);
				// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
				proxy.mittBus.emit('onSignInClick');
			}, 300);
		};
		return {
			currentTime,
			onSignIn,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
h1 {
	font-size: 40px;
	color: #fff;
	margin: 50px 0px 80px 0px;
	text-align: center;
}

#h2login {
	font-size: 25px;
	color: #ffffff;
	margin-bottom: 20px;
}

input[type='text'],
input[type='password'] {
	width: 93.5%;
	padding: 15px;
	border: 1px solid #7d7d7d;
	outline: none;
	font-size: 14px;
	margin-bottom: 20px;
	border-radius: 25px;
}
form ul {
	float: left;
}
ul li {
	list-style: none;
	display: inline-block;
}
ul li input[type='checkbox'] {
	vertical-align: middle;
}
ul li input[type='checkbox'] + label {
	position: relative;
	padding-left: 5px;
	border: #f0f8ff;
	color: #ffffff;
	display: inline-block;
	font-size: 14px;
	vertical-align: middle;
}

form a {
	color: #ffffff;
	float: right;
	font-size: 14px;
}
input[type='button'] {
	background: #faebd7;
	padding: 13px 0;
	font-size: 16px;
	color: black;
	cursor: pointer;
	outline: none;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	width: 100%;
	border: 1px solid black;
	margin-top: 25px;
	border-radius: 25px;
}

input[type='button']:hover {
	background: #081148;
	color: #ffffff;
}
.footer-w3l {
	margin: 120px 0 15px 0;
}
.footer-w3l p {
	font-size: 14px;
	text-align: center;
	color: #fff;
	line-height: 27px;
}
.footer-w3l p a {
	color: #fff;
}
.footer-w3l p a:hover {
	text-decoration: underline;
}

/*--pop-up--*/
a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
	border: 1px solid #fff;
	padding: 8px 34px;
	color: #fff;
	display: inline-block;
	margin-top: 35px;
	border-radius: 20px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	outline: none;
}
a.book.popup-with-zoom-anim.button-isi.zoomIn.animated:hover {
	border: 1px solid #0c1558;
	color: #fff;
	background: #0c1558;
}
.book-form {
	padding: 2em;
}
.book-form h3 {
	font-size: 1.8em;
	text-align: left;
	color: #7d7d7d;
	margin-bottom: 1.5em;
}
/*-- //pop-up --*/

/*-- Responsive --*/
@media screen and (max-width: 1440px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 73px;
	}
	input[type='text'],
	input[type='password'] {
		width: 91%;
	}
}
@media screen and (max-width: 1366px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 70px;
	}
	input[type='text'],
	input[type='password'] {
		width: 90.5%;
	}
}
@media screen and (max-width: 1280px) {
	.w3layouts {
		width: 75%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 1080px) {
	.w3layouts {
		width: 80%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 63px;
	}
}
@media screen and (max-width: 1024px) {
	h1 {
		margin: 50px 0px 56px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 60px;
	}
	input[type='text'],
	input[type='password'] {
		width: 89%;
	}
	.footer-w3l {
		margin: 80px 0 15px 0;
	}
}
@media screen and (max-width: 991px) {
	.w3layouts {
		width: 85%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 966px) {
}
@media screen and (max-width: 900px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 55px;
	}
	input[type='text'],
	input[type='password'] {
		width: 88%;
	}
}
@media screen and (max-width: 800px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 49px;
	}
	input[type='text'],
	input[type='password'] {
		width: 87%;
	}
}
@media screen and (max-width: 768px) {
	.w3layouts {
		width: 90%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 50px;
	}
	ul li input[type='checkbox'] + label {
		font-size: 13px;
	}
	form a {
		font-size: 13px;
	}
}
@media screen and (max-width: 736px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 48px;
	}
}
@media screen and (max-width: 667px) {
	h1 {
		margin: 30px 0px 45px 0px;
	}
	.w3layouts {
		width: 95%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 46px;
	}
	input[type='text'],
	input[type='password'] {
		padding: 12px;
	}
	input[type='submit'] {
		padding: 12px 0;
	}
	.my-mfp-zoom-in.mfp-ready #small-dialog {
		padding: 30px !important;
	}
}
@media screen and (max-width: 640px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 44px;
	}
	.signup-agileinfo p {
		font-size: 13.5px;
		line-height: 27px;
	}
}
@media screen and (max-width: 600px) {
	.w3layouts {
		width: 85%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 82%;
	}
	input[type='text'],
	input[type='password'] {
		width: 93%;
	}
}
@media screen and (max-width: 568px) {
	h1 {
		font-size: 35px;
		margin: 35px 0px 50px 0px;
	}
	.footer-w3l {
		margin: 40px 0 15px 0;
	}
}
@media screen and (max-width: 480px) {
	.signin-agile,
	.signup-agileinfo {
		width: 77%;
	}
	input[type='text'],
	input[type='password'] {
		width: 92%;
	}
	.footer-w3l p {
		font-size: 13px;
	}
}
@media screen and (max-width: 414px) {
	h1 {
		font-size: 28px;
		margin: 35px 0px 40px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 74%;
	}
	input[type='text'],
	input[type='password'] {
		width: 89%;
	}
	form a {
		margin-top: 3px;
	}
	.signup-agileinfo {
		height: 240px;
	}
}
@media screen and (max-width: 384px) {
	h1 {
		font-size: 30px;
		margin: 35px 0px 40px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 77%;
		padding: 35px;
	}
	a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
		padding: 5px 25px;
		font-size: 13px;
		margin-top: 25px;
	}
}
@media screen and (max-width: 375px) {
	.signin-agile,
	.signup-agileinfo {
		width: 80%;
		padding: 30px;
	}
	.book-form h3 {
		font-size: 1.5em;
	}
}
@media screen and (max-width: 320px) {
	h1 {
		font-size: 27px;
		margin: 35px 0px 30px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 84%;
		padding: 20px;
	}
	.signin-agile h2,
	.signup-agileinfo h3 {
		font-size: 20px;
	}
	input[type='text'],
	input[type='password'] {
		padding: 10px;
	}
	input[type='submit'] {
		padding: 10px 0px;
	}
	ul li input[type='checkbox'] + label span:first-child {
		width: 10px;
		height: 10px;
		top: 3px;
	}
	ul li input[type='checkbox'] + label {
		font-size: 12px;
		padding-left: 20px;
	}
	form a {
		font-size: 12px;
		margin-top: 4px;
	}
	a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
		margin-top: 30px;
	}
	.signup-agileinfo p {
		font-size: 12.5px;
	}
}
</style>
